<template>
  <view class="relative-position">
    <image :src="detail.thumb" mode="widthFix" class="origin-img" v-if="!imgUrl"></image>
    <image :src="imgUrl" mode="widthFix" class="origin-img" v-else></image>
    <view class="test">令瑞斌</view>
    <view class="test2">生日快乐</view>
    <view class="padding-10">
      <u-form :model="infoForm" :labelWidth="80">
        <u-form-item label="姓名" prop="manName">
          <u-input placeholder="姓名" v-model="infoForm.manName"/>
        </u-form-item>
        <u-form-item label="专业" prop="profName">
          <u-input placeholder="专业" maxlength="12" v-model="infoForm.profName"/>
        </u-form-item>
        <u-button text="立即生成" color="#FFC107" @click="onSaveData" class="margin-top-10"></u-button>
      </u-form>
    </view>
    <l-painter :board="poster" isCanvasToTempFilePath @success="getImg($event)" hidden/>
    <!--    <loading/>-->
    <video-a-d/>
  </view>
</template>

<script>
import {
  base64ToPath
} from 'image-tools';
import Loading from '../../components/loading';

export default {
  components: {
    Loading
  },
  data() {
    return {
      isInters: true,
      poster: {},
      infoForm: {
        manName: '令瑞斌',
        profName: '生物科学与技术',
      },
      showPop: false,
      imgUrl: '',
      detail: {
        name: '火爆全网-山河大学录取通知书',
        id: 3,
        path: '/pages/index/detail_shdx',
        thumb: 'http://www.tejiawang.work/imgs/thumb/bsj.jpg',
        img: "http://www.tejiawang.work/imgs/origin/bsj.jpg"
      },
    };
  },
  methods: {
    onSaveData() {
      if (!this.infoForm.manName || !this.infoForm.profName) {
        this.$util.showToast('请填写完整信息');
        return;
      }

      this.poster = {
        css: {
          width: '750rpx',
          position: 'relative'
        },
        views: [{
          type: 'image',
          src: this.detail.img,
          css: {
            width: '100%',
            minHeight: '200rpx',
          },
        },
          {
            type: 'text',
            text: this.infoForm.manName,
            css: {
              fontSize: '44rpx',
              width: "50rpx",
              lineHeight: "46rpx",
              position: 'absolute',
              top: '40rpx',
              left: '200rpx',
              color: '#F0D27A',
              zIndex: 10,
            },
          },
          {
            type: 'text',
            text: this.infoForm.profName,
            css: {
              fontSize: '24rpx',
              position: 'absolute',
              top: '324rpx',
              left: '316rpx',
              color: '#000000',
              zIndex: 10,
            },
          },
        ],
      };

      // poster=posterData
    },
    getImg(e) {
      const vm = this;
      this.imgUrl = e;
    },
  },
  onReady() {
    this.detail = this.dataList.filter(val => val.id == this.detail.id)[0]
    // this.onSaveData()
  }
};
</script>

<style lang="scss" scoped>
.origin-img {
  width: 100%;
  display: block;
  min-width: 100px;
}

.test {
  position: absolute;
  color: red;
}
</style>
